<template>
  <div class="editOrgTree">
    <el-input v-model="search" placeholder="组织编码/名称" class="input-with-select">
      <span slot="append">搜索</span>
    </el-input>
    <el-tree
      ref="OrgTree"
      :data="treeData"
      :filter-node-method="handleFilterNode"
      style="margin-top:10px;"
      node-key="phid"
    >
      <span slot-scope="{ node, data }" class="custom-tree-node">
        <span>{{ data.name }}</span>
        <i class="el-icon-delete" @click="deleteNode(node)" />
      </span>
    </el-tree>
  </div>
</template>
<script>
export default {
  name: 'EditOrgTree',
  props: {
    detail: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      search: '',
      normalTreeData: null,
      treeData: null,
      deleteIds: []
    }
  },
  inject: [],
  watch: {
    search(val) {
      this.$refs.OrgTree.filter(val)
    }
  },
  created() {
    this.normalTreeData = this.detail.orgList
    this.treeData = this.detail.children
  },
  mounted() {},
  methods: {
    deleteNode(node) {
      this.$refs.OrgTree.remove(node)
      this.deleteIds.push(node.key)
    },
    handleFilterNode(value, data) {
      if (!value) return true
      return data.name.indexOf(value) !== -1
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/styles/variables.scss';
.editOrgTree {
  font-size: 0.16rem;
  min-height: 300px;
  position: relative;
  overflow: auto;
  .input-with-select {
    margin-bottom: 10px;
  }
}
</style>

